import React, { useEffect, useState } from "react";
import './collection.scss';
import { Link } from "react-router-dom";
import * as api from 'api/index'
function Collection() {
    //收藏
    let [footprin, setFootprin] = useState([])
    const footprintList = () => {
        api.browseList().then(res => {
            console.log('footprin', res);
            let newList = handleList(res.result)
            setFootprin(newList)
        })
    }
    console.log('footprin', footprin);
    useEffect(footprintList, [])
    //处理数据:按照日期重新整理数组
    const handleList = (list) => {
        let dateList = list.map((item) => item.updateTime);
        //去重
        let set = new Set(dateList)
        // 转数组
        dateList = [...set];
        console.log('dateList', dateList);
        let newList = dateList.map((date) => {
            // 过滤相同日期的成员
            let childrenList = list.filter((item) => item.updateTime === date);
            console.log('childrenList-----list', list);
            return {
                date,
                childrenList,
            };
        });
        return newList;
    };


    return (
        <div className="collection">
            <header className="bg-fff header flex aic">
                <div className="flex aic jc-sb ml-10 mr-10 borde f20">
                    <div className="flex aic Colors">
                        <p className=" f24 iconfont icon-zuojiantou"></p>
                        <Link style={{ textDecoration: 'none' }} to={"/my"}><p className="f16 Colors">返回</p></Link>
                    </div>
                    <p className="f18">我的收藏</p>
                    <div className="flex aic Colors right">
                        <p className=" f24 iconfont icon-zuojiantou"></p>
                        <p className="f16">返回</p>
                    </div>
                </div>
            </header>
            <ul className="bg-fff ul">
                {footprin.map((item, index) => (
                    <li key={index}>
                        {/* <div className="date flex jc-sb aic f18">
                            <p className="ml-20 left fw">{item.date}</p>
                            <p className="pr-20 Colors" >清除</p>
                        </div> */}
                        {item.childrenList.map((children, index) => (
                            <div className="flex pl-20 mt-15 f14 aic  pb-20" key={index}>
                                <img src={children.imageUrl} alt="" />
                                <div className="flex fdc ml-10 right">
                                    <p className="fw">{children.name}</p>
                                    <p>价格: ¥<span className="Colors"> {children.showMinPrice}</span> 起</p>
                                    <p>人均: ¥<span className="Colors"> {children.showMinAverage}</span> 起</p>
                                </div>
                            </div>
                        ))}
                    </li>
                ))}
            </ul>
            {/* <div className="flex jc-c mt-20">
                <span className="f14 final">没有更多了</span>
            </div> */}
        </div>

    )
}

export default Collection